/** @author: duanhaijiao  @date 2022/7/6--11:30 **/

/* name: "contact" */
<template>
    <div class="contact">
        <div class="contact-option" v-for="option in contactList" :key="option.id">
            <div class="contact-option-title flex flex-align-center bold">
                {{option.name}}
            </div>
            <div class="contact-option-data">
                <div v-for="item in option.communication" class="contact-option-data-item flex flex-align-center">
                    <div>{{item.name}}</div>
                    <div style="flex: 3">{{item.position}}</div>
                    <div>{{item.mobile}}</div>
                    <div>{{item.inside_tel}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { home } from '@/assets/api/api.js'
    export default {
        name: "contact",
        data() {
            return {
                contactList:[],
            }
        },
        mounted() {
            this.getDataList()
        },
        methods: {
            getDataList(){
                this.$http(home.department,{}).then((res)=>{
                    this.contactList = res.data
                })
            },

        }
    };
</script>

<style lang="scss">
    .contact{
        padding: 20px 0;
        .contact-option{
            width: 70%;
            margin: auto;
            margin-bottom: 20px;
            .contact-option-title{
                justify-content: center;
                padding: 10px;
                background: #EFF5FB;
                border: 1px solid #E8EAF1;
            }
            .contact-option-data{
                border: 1px solid #f1f1f1;
                .contact-option-data-item{
                    >div{
                        height: 40px;
                        flex: 1;
                        line-height: 40px;
                        text-align: center;
                        border-right: 1px solid #f1f1f1;
                        border-bottom: 1px solid #f1f1f1
                    }
                }
            }

        }
    }

</style>
